import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, Modal, Row } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getGroupList, addGroup } from '@/services/supplier/manageStaff/manageGroup'

// 表头
const columns = [
  {
    title: '部门编号',
    dataIndex: 'id',
    key: 'id',
    align: 'center'
  },
  {
    title: '中文名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center'
  },
  {
    title: '英文名称',
    dataIndex: 'englishName',
    key: 'englishName',
    align: 'center'
  },
  {
    title: '描述',
    dataIndex: 'depict',
    key: 'depict',
    align: 'center'
  },
  {
    title: '创建/更新人',
    dataIndex: 'updatePeople',
    key: 'updatePeople',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center'
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
    align: 'center'
  },
  {
    title: '排序号码',
    dataIndex: 'sort',
    key: 'sort',
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center'
  }
]

const ManageGroup = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [groupList, setGroupList] = useState([])
  const [total, setTotal] = useState(1)
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    await getGroupLists()
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    switch (type) {
      case 1:
        handleModal()
        break;
    }
  }
  // 获取分组列表
  const getGroupLists = async (pageNo = 1) => {
    let params = {
      pageNo,
      pageSize
    }
    let res = await getGroupList(params)
    if (res.code === '0') {
      setGroupList(res.data)
      setTotal(res.iTotalDisplayRecords)
    } else {
      alert(res.msg)
    }
  }

  const pagination = {
    total: parseInt(total),
    onChange(page) {
      getGroupLists(page)
    }
  }
  // 添加分组
  const addGroups = async () => {
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
      let params = {
        departmentManage: {
          depict: values.depict,
          englishName: values.englishName,
          name: values.name,
          number: values.number,
          sort: values.sort
        }
      }
      let res = await addGroup(params)
      if (res.code === '0') {
        alert(res.msg)
        init()
      } else {
        alert(res.msg)
      }
    })
  }
  // 操控弹出层
  const handleModal = () => {
    setVisible(!visible)
  }
  // 确认弹出层
  const handleOk = async () => {
    await addGroups()
    handleModal()
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table
        columns={columns}
        dataSource={groupList}
        rowKey={record => record.id}
        pagination={pagination}
      />
      <Modal
        title="新增分组"
        visible={visible}
        onOk={handleOk}
        onCancel={handleModal}
      >
        <Row gutter={24}>
          <Col span={24}>
            <Form.Item label="编号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('number', {})
                (<Input placeholder="请输入编号" />)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="中文名称" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('name', {})
                (<Input placeholder="请输入中文名称" />)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="英文名称" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('englishName', {})
                (<Input placeholder="请输入英文名称" />)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="描述" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('depict', {})
                (<Input placeholder="请输入描述" />)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="排序" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('sort', {})
                (<Input placeholder="请输入排序" />)}
            </Form.Item>
          </Col>
        </Row>
      </Modal>
   </PageHeaderWrapper>
  )
}

export default Form.create()(ManageGroup)
